<!--
 * @Author       : Sayolit
 * @Date         : 2023-04-10 20:33:40
 * @LastEditors  : Sayolit
 * @LastEditTime : 2023-04-15 19:42:27
 * @FilePath     : guidePageContent.vue
 * @Description  : 
 * Copyright 2023 Sayolit, All Rights Reserved. 
 * 2023-04-10 20:33:40
-->
<script setup>
	import { ref, reactive, computed } from 'vue'
	import { useRouter } from 'vue-router'

	const router = useRouter()

	const isMoveAnimation = ref(true)

	const shrinkValue = ref(false)

	const toAddition = () => {
		router.push('/test')
	}

	onMounted(() => {
		setTimeout(() => {
			isMoveAnimation.value = false
		}, 1000)
	})
</script>
<template>
	<!-- 引导页面  -->

	<div class="guide-main">
		<el-scrollbar height="100vh" style="width: 100%">
			<div class="guide-header">
				<div class="header-main">
					<div
						:class="[
							'header-text',
							isMoveAnimation ? 'animate__animated animate__zoomInDown' : '',
						]"
					>
						语音识别
					</div>
					<div :class="['hearder-voice']">
						<img src="../../assets/images/voice.svg" alt="" />
					</div>
				</div>

				<!-- 模态框 -->
				<div class="header-modal">
					<ul>
						<li>特征提取</li>
						<li>数据增强</li>
						<li>声纹注册</li>
						<li>声纹识别</li>
					</ul>
				</div>
			</div>
			<!-- 手风琴展示功能区 -->
			<div class="accordion-div">
				<ul class="accordion-ul">
					<li
						class="accordion-li"
						:style="{ width: shrinkValue ? '25%' : '45%' }"
					>
						<img src="../../assets/images/arrow.png" alt="" />
						<div class="li-text">
							<p>特征提取</p>
							<p>通过Fbank方法提取音频梅尔普特征</p>
							<p>更好拟合人耳的接收特性</p>
						</div>
					</li>
					<li
						class="accordion-li"
						@mouseenter="shrinkValue = true"
						@mouseleave="shrinkValue = false"
					>
						<img src="../../assets/images/search.png" alt="" />
						<div class="li-text">
							<p>数据增强</p>
							<p>随机加入背景噪音及房间脉冲响应</p>
							<p>保证语音识别的鲁棒性</p>
						</div>
					</li>
					<li
						class="accordion-li"
						@mouseenter="shrinkValue = true"
						@mouseleave="shrinkValue = false"
					>
						<img src="../../assets/images/video.png" alt="" />
						<div class="li-text">
							<p>声纹注册</p>
							<p>支持用户注册声纹</p>
							<p>系统可扩展至更大规模的声纹库</p>
						</div>
					</li>
					<li
						class="accordion-li"
						@mouseenter="shrinkValue = true"
						@mouseleave="shrinkValue = false"
					>
						<img src="../../assets/images/voice.png" alt="" />
						<div class="li-text">
							<p>声纹识别</p>
							<p>利用ECAPA-TDNN智能识别声纹信息</p>
							<p>提供语音相似度供用户自由选择</p>
						</div>
					</li>
				</ul>
			</div>

			<!-- 视差滚动区 -->
			<div class="parallax-scroll-div"></div>

			<!-- 底部开始使用div -->
			<div class="guide-bottom">
				<div @click="router.push('/')">
					Start using your Voice recognition assistant!
				</div>
			</div>
		</el-scrollbar>
	</div>
</template>

<style scoped lang="less">
	.guide-main {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		// background-color: skyblue;

		// 修改滚动条颜色
		:deep(.el-scrollbar__thumb) {
			background-color: #2f46ef;
		}

		.guide-header {
			width: 100%;
			background-color: #f4f5f9;
			display: flex;
			height: 450px;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			position: relative;

			background: url('../../assets/images/background.jpg') no-repeat;
			background-size: 100% 100%;

			.header-main {
				width: 85%;
				height: 350px;
				display: flex;
				justify-content: space-around;
				align-items: center;

				&:hover div:nth-of-type(1) {
					transform: translateX(120%);
				}

				&:hover div:nth-of-type(2) {
					transform: translateX(-120%);
				}

				> div {
					display: flex;
					justify-content: center;
					align-items: center;
					transition: transform 0.7s ease;
				}

				div:nth-of-type(1) {
					width: 40%;
					font-size: 7rem;
					color: white;
					user-select: none;
				}

				div:nth-of-type(2) {
					height: 275px;
					user-select: none;
					width: 40%;
					> img {
						object-fit: contain;
						width: 100%;
						height: 100%;
					}
				}
			}

			.header-modal {
				@h: 150px;

				width: 100%;
				height: 150px;
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;

				// 卡在盒子中间计算方法
				bottom: ~'calc(0rem - @{h}/2)';

				ul {
					height: 100%;
					width: 80%;

					display: flex;
					justify-content: space-around;
					align-items: center;

					li {
						width: 180px;
						height: 90px;
						border-radius: 8px;
						font-size: 25px;
						display: flex;
						justify-content: center;
						align-items: center;
						color: rgb(255, 255, 255);
						user-select: none;

						cursor: pointer;

						background: #70bfed
							linear-gradient(to right, rgba(0, 255, 0, 0), #75e6a4);

						transition: background-color 0.5s;

						&:hover {
							background-color: rgb(83, 151, 246);
							box-shadow: 0 0 10px #ffffff;
						}
					}
				}
			}
		}

		.accordion-div {
			margin: 80px 0;
			width: 100%;
			height: 550px;
			display: flex;
			justify-content: center;
			align-items: center;

			.accordion-ul {
				height: 100%;
				width: 1500px;
				margin-left: 5%;
				margin-right: 5%;
				border-radius: 8px;

				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: row;
				white-space: nowrap;

				li {
					width: 25%;
					height: 90%;
					list-style: none;
					margin-left: 15px;
					transition: all 0.45s ease;
					border-radius: 20px;
					position: relative;
					overflow: hidden;

					// border: 3.5px solid transparent;

					background: #2568cd
						linear-gradient(to bottom, rgba(0, 255, 0, 0), #d7e2f0);

					.li-text {
						padding: 15px;
						display: flex;
						justify-content: center;
						align-items: flex-start;
						flex-direction: column;
						position: absolute;
						z-index: 2;

						p {
							font-size: 24px;
							color: white;

							transition: color 0.5s ease;
						}
						p:nth-of-type(1) {
							margin-bottom: 30px;
						}

						p:nth-of-type(2),
						p:nth-of-type(3) {
							margin-bottom: 10px;
							font-size: 20px;
							font-weight: bolder;
						}
					}

					&:hover {
						width: 45%;
						background-color: #70aff8;
					}

					&:hover .li-text p:nth-of-type(1) {
						color: #000000;
					}
					&:hover .li-text p:nth-of-type(2) {
						color: #3d3d3d;
					}
					&:hover .li-text p:nth-of-type(3) {
						color: #3d3d3d;
					}
				}

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					position: absolute;
					z-index: 1;
					opacity: 0.75;
					transition: opacity 0.45s ease;

					&:hover {
						opacity: 0.55;
					}
				}

				// li:nth-of-type(1) {
				// 	background-size: 100% 100%;
				// 	background: url(../../assets/images/arrow.png) no-repeat;
				// }
				// li:nth-of-type(2) {
				// 	background-size: 100% 100%;
				// 	background: url(../../assets/images/search.png) no-repeat;
				// }
				// li:nth-of-type(3) {
				// 	background-size: 100% 100%;
				// 	background: url(../../assets/images/voice.png) no-repeat;
				// }
				// li:nth-of-type(4) {
				// 	background-size: 100% 100%;
				// 	background: url(../../assets/images/video.png) no-repeat;
				// }
			}
		}

		.parallax-scroll-div {
			width: 100%;
			height: 1100px;
			background: url('../../assets/images/bc3.jpg') no-repeat;
			background-size: 100% 100%;

			background-attachment: fixed;

			margin-bottom: 100px;
		}

		.guide-bottom {
			// position: fixed;
			// bottom: 0;
			width: 100%;
			height: 100px;
			background-color: rgb(4, 4, 138);
			z-index: 999;

			display: flex;
			justify-content: center;
			align-items: center;

			div {
				color: white;
				font-family: 'Bungee';
				font-size: 2.1rem;
				cursor: pointer;
				transition: all 0.45s ease;

				&:hover {
					text-shadow: 0 0 25px #fff;
					color: #e7f6f2;
				}
			}
		}
	}
</style>
